<template>
  <component :is="menuComponent" :item="item" :full-path="fullPath">
    <template v-if="item.children && item.children.length">
      <van-menu v-for="route in item.children" :key="route.path" :full-path="handlePath(route.path)" :item="route" />
    </template>
  </component>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { isExternal } from '@/utils/route'
import path from 'path'

export default defineComponent({
  name: 'VanMenu',
  props: {
    item: {
      type: Object,
      required: true
    },
    fullPath: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const menuComponent = computed(() => {
      if (props.item.notShowChildren) {
        return 'VanMenuItem'
      } else {
        return 'VanSubMenu'
      }
    })
    const handlePath = function(pathStr: string) {
      if (isExternal(pathStr)) {
        return pathStr
      }
      if (isExternal(props.fullPath)) {
        return props.fullPath
      }
      return path.resolve(props.fullPath, pathStr)
    }
    return { menuComponent, handlePath }
  }
})
</script>
